<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>区县管理</title>
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
    <script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
	<script src="../../../../static/js/jquery.nestable.js" th:src="@{/js/jquery.nestable.js}"></script>
</head>
<body>
	<div id="app" v-cloak>
		<div class="main-content">
			<!-- 页面头部 -->
			<div class="page-header">
				<h1 class="page-title">区县</h1>
				<div class="z-pop_question">
	  	 			<el-popover
					  ref="popoverq"
					  placement="bottom-start"
					  width="400"
					  trigger="hover">
					  <p class="z-jiao">
					 		 区县
							<!-- <a href="javascript:;">查看更多帮助</a> -->
					  </p>
					</el-popover>
					
					<i v-popover:popoverq class="el-icon-question"></i>
	  	 		</div>
				<div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>数据<span>/</span>地区</div>
			</div><!-- 页面头部 end -->

			<div class="list-content">
				<!--条件筛选-->
				<div class="content_item_filter clearfix" v-bind:class="[hasfilterMore?'content_filter_more':'']">
	 				<div class="input-select fl btn-radid_none">
	 					<div class="filter-form filter-form-one clearfix">
		 					<el-input placeholder="区县名称" v-model="conditions.name.value" class="minW40 z_input-holder" ></el-input>
						</div>
						<div class='filter-form filter-form-more clearfix' v-show="filterMore"></div>

						<div class="filter-operate">
							<div class="filter-more" @click="toggleMoreSearch" v-show="hasfilterMore"><i v-bind:class="[filterMore?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>

							<el-tooltip class="item" content="查询" placement="bottom-start">
						    	<el-button icon="el-icon-search" @click="handleQuery"></el-button>
						    </el-tooltip>
							<el-tooltip class="item" content="清空" placement="bottom-start">
						    	<el-button icon="el-extend-clean" @click="handleClear"></el-button>
						    </el-tooltip>
					    </div>
						
	 				</div>
	 				<div class="filter-btn fr">
	 					
	 				</div>
				</div>
					
				 <!--主体表格-->
	            <div class="z-tables">
	                <el-table ref="multipleTable" :data="regionList" style="width: 100%;">
	                    <el-table-column fixed type="index" label="序号" class-name="z-opt_btn"></el-table-column>
	                    <el-table-column prop="entityNo" label="区县编号" min-width="100"></el-table-column>
	                    <el-table-column prop="name" label="区县名称" min-width="100"></el-table-column>
	                    <el-table-column prop="parentId" label="上级编号" min-width="100"></el-table-column>
	                </el-table>
	            </div>
	 			
	 			<!--分页-->
	 			<div class="grid-content">
		 			<div class="bg-purple-light">
					    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="pageSizeList"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next"
                            :total="totalNum">
                    	</el-pagination>
				  	</div>
				</div>
			</div>


		</div>
		
	</div>
	
</body>
	

<script th:inline="javascript">
	var app = new Vue({
		el: "#app",
		data: {
			loading: true,
		    tableAllCheck: false,  // table 下方批量操作全选
		    hasfilterMore: false,  // 列表是否拥有更多筛选条件
		    filterMore: false,  // 列表更多筛选条件是否展示
		    regionList: [],
		    pageSizeList: [5, 10, 20, 50],
            totalNum: 0,
            currentPage: 1, //当前页码数
            pageSize: 10,
            conditions: {
                "name": {
                    "operation": "LIKE",
                    "value": undefined
                }
             
            }
	        
		},
        created: function () {
           // queryList();
        },
		methods: {
			change: function (ele) {
		  		console.log(this.valueState);
		  	},
		  	
		  	handleSizeChange: function (val) {
		  		this.pageSize = val;
		  		var that = this;
                queryList(that);
		    },
		    
		    handleCurrentChange: function (val) {
		    	 this.currentPage = val;
		    	 var that = this;
	              queryList(that);
		    },

		    handleQuery() {
                this.currentPage = 1;
                var that = this;
                queryList(that);
            },
            handleClear() {
                this.conditions.name.value = undefined;
            },
		  
			// 列表筛选项更多操作
			toggleMoreSearch(){
				this.filterMore = !this.filterMore;
			},

			// 列表“新增”操作 下拉按钮组按钮点击事件
			handleClick() {
		        alert('button click');
		    },
          	//编辑
            handleView: function (position, row) {
                window.location.href = '/backstage/basicdata/area/region/toview/' + row.uuid;
            }
            
		},
		mounted: function () {
			var that = this;
			tableMoreSearch(that);
			
			queryList(that)

			window.onresize = function() {
	            tableMoreSearch(that);
	        }
			
		},
		updated: function () {
			
		}
	});

	function queryList(app) {
        app._data.loading = true;
        let queryMessage = {
            "queryPage": app.currentPage,
            "pageShow": app.pageSize,
            "queryParams": app.conditions,
            "sortMap": {
                "uuid": "asc"
            }
        };
        $.ajax({
            url: "/backstage/basicdata/area/region/list",
            type: "POST",
            data: JSON.stringify(queryMessage),
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            success: function (data) {
                if (data && data.returnCode == "1") {
                    app._data.regionList = data.returnMessage;
                    app._data.totalNum = data.pager.totalNum;
                }
                app._data.loading = false;
            }
        });
    }
	
	function tableMoreSearch(vm){
		var that = vm;
		var $searchForm = $(".content_item_filter .filter-form-one"),
		 	$searchItem = $(".content_item_filter .filter-form-one > div"),
		 	$searchMore = $(".filter-form-more > div"),
		 	itemMax = 0,
		 	itemWidth = 0,
		 	singleWidth = 130;
			$searchItem.each(function(index,obj){
			itemWidth += $(obj).outerWidth(true);
			if (itemWidth > $searchForm.width()) {
				itemMax = index-1;
				that.hasfilterMore = true;
				console.log(that.hasfilterMore)
				var $searchMoreItem = $(".content_item_filter .filter-form > div:gt("+itemMax+")");
				$(".filter-form-more").prepend($searchMoreItem);
				return false;
			}
		});
		if(itemWidth < $searchForm.width()-singleWidth && $searchMore.length > 0){
			itemMax = Math.floor(($searchForm.width()-itemWidth)/130);
			console.log(itemMax)
			$searchForm.append($(".filter-form-more > div:lt("+itemMax+")"));
			if (itemMax >= $searchMore.length) {
				that.hasfilterMore = false;
			}
		}
	}
</script>
</html>